<template>
    <div class="login-container" :class="{ 'login-container-move': signUpMode }">
        <div class="login-form">
            <div class="login-form-content">
                <div class="login-content">
                    <login-form></login-form>
                </div>
                <div class="register-content">
                    <register-form></register-form>
                </div>
            </div>
        </div>
        <div class="translation-content">
            <div class="translation-left">
                <div class="letter-container">
                    <h3>路漫漫其修道远，吾将上下而求索</h3>
                    <p>学习必须与实干相结合</p>
                    <div class="button" @click="signUpMode=!signUpMode"><p>注册</p></div>
                </div>
                <div class="image-box">
                    <img src="../assets/image/log.svg" alt="">
                </div>
            </div>
            <div class="translation-right">
                <div class="letter-container">
                    <h3>读不在三更五鼓，功只怕一曝十寒</h3>
                    <p>鸟欲高飞先振翅，人求上进先读书</p>
                    <div class="button" @click="signUpMode=!signUpMode"><p>登陆</p></div>
                </div>
                <div class="image-box">
                    <img src="../assets/image/register.svg" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    // @ts-ignore
    import { ref } from "vue";
    import LoginForm from "../components/LoginForm/LoginForm.vue";
    import RegisterForm from "../components/RegisterForm/RegisterForm.vue";
    export default {
    name: 'Login',
    components: {
        LoginForm,
        RegisterForm
    },
    setup() {
      const signUpMode = ref<boolean>(false);

      return {
        signUpMode,
      };
    }
  }
</script>

<style scoped lang="scss">
    .login-container{
        width: 100%;
        min-height: 100vh;
        background: #fff;
        position: relative;
        overflow: hidden;

        .login-form{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            z-index: 10;
            width: 100%;
            .login-form-content{
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
                left: 75%;
                width: 36%;
                transition: 1s 0.7s ease-in-out;
                display: grid;
                grid-template-columns: 1fr;
                z-index: 5;
                .login-content {
                    width: 100%;
                    opacity: 1;
                    z-index: 2;
                    transition: 1s 0.7s ease-in-out;
                }
                .register-content{
                    width: 100%;
                    opacity: 0;
                    z-index: 1;
                    transition: 1s 0.7s ease-in-out;
                }
            }
        }

        &:before {
            content: "";
            position: absolute;
            height: 2000px;
            width: 2000px;
            top: -10%;
            right: 48%;
            transform: translateY(-50%);
            background-image: linear-gradient(-45deg, #4481eb 0%, #04befe 100%);
            transition: 1.8s ease-in-out;
            border-radius: 50%;
            z-index: 6;
        }

        .translation-content {
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            display: grid;
            grid-template-columns: repeat(2, 1fr);

            .translation-left{
                display: flex;
                flex-flow: column;
                align-items: flex-end;
                justify-content: space-around;
                text-align: center;
                z-index: 6;
                pointer-events: all;
                padding: 3rem 17% 2rem 12%;

                .letter-container{
                    color: #fff;
                    transition: transform 0.9s ease-in-out;
                    transition-delay: 0.6s;
                    display: flex;
                    flex-flow: column;
                    align-items: flex-start;
                    justify-content: flex-start;
                    h3{
                        font-weight: 600;
                        line-height: 1;
                        font-size: 1.5rem;
                    }
                    p{
                        font-size: 0.95rem;
                        padding: 0.7rem 0;
                    }

                    .button{
                        margin: 0;
                        background: none;
                        border: 1px solid #fff;
                        width: 130px;
                        height: 41px;
                        font-weight: 600;
                        font-size: 0.8rem;
                        cursor: pointer;
                        border-radius: 10000px;
                        p{
                            font-size: 0.95rem;
                            padding: 0.7rem 0;
                        }
                    }
                }

                .image-box{
                    width: 100%;
                    transition: transform 1.1s ease-in-out;
                    transition-delay: 0.4s;
                    overflow: hidden;
                    img{
                        width: 100%;
                    }
                }
            }

            .translation-right{
                display: flex;
                flex-flow: column;
                align-items: flex-end;
                justify-content: space-around;
                text-align: center;
                z-index: 6;
                pointer-events: none;
                padding: 3rem 12% 2rem 17%;

                .letter-container{
                    color: #fff;
                    transition: transform 0.9s ease-in-out;
                    transition-delay: 0.6s;
                    transform: translateX(800px);
                    display: flex;
                    flex-flow: column;
                    align-items: flex-end;
                    justify-content: flex-start;
                    h3{
                        font-weight: 600;
                        line-height: 1;
                        font-size: 1.5rem;
                    }
                    p{
                        font-size: 0.95rem;
                        padding: 0.7rem 0;
                    }

                    .button{
                        margin: 0;
                        background: none;
                        border: 1px solid #fff;
                        width: 130px;
                        height: 41px;
                        font-weight: 600;
                        font-size: 0.8rem;
                        cursor: pointer;
                        border-radius: 10000px;
                        p{
                            font-size: 0.95rem;
                            padding: 0.7rem 0;
                        }
                    }
                }

                .image-box{
                    width: 100%;
                    transition: transform 1.1s ease-in-out;
                    transition-delay: 0.4s;
                    overflow: hidden;
                    transform: translateX(800px);
                    img{
                        width: 100%;
                    }
                }
            }
        }


        &.login-container-move {
            &:before {
                transform: translate(100%, -50%);
                right: 52%;
            }
            .login-form{
                .login-form-content{
                    left: 25%;
                    .login-content{
                        opacity: 0;
                        z-index: 1;
                    }
                    .register-content{
                        opacity: 1;
                        z-index: 2;
                    }
                }
            }
            .translation-content{
                .translation-left{
                    pointer-events: none;
                    .letter-container,.image-box{
                        transform: translateX(-800px);
                    }
                }
                .translation-right{
                    pointer-events: all;
                    .letter-container,.image-box{
                        transform: translateX(0);
                    }
                }
            }
        }
    }
</style>
